{extend name="extra@admin/content"}
{block name="button"}

<div class="nowrap pull-rignt" style="margin-top:10px">
<div class="hr-line-dashed"></div>
<span style="color:red;"> 温馨提示：一旦保存新的商品属性，以前的商品属性就会被覆盖，所有与商品属性相关的草做都会受到影响，请谨慎操作
</span>
</div>
{/block}
{block name="content"}
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    /*height: 500px;*/
}
</style>
<form onsubmit="return false;" action="{:url('Goodsspec/savespecdetail')}" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    {if condition="$goods.is_spec eq 0"}
    <div class="layui-form-item">
        <label class="layui-form-label">是否有属性</label>
        <div class="layui-input-block">
          <input type="radio" lay-filter="test" name="sign" value="1"  title="有" >
          <input type="radio" lay-filter="test" name="sign" value="0" {if condition="!empty($goods_price.id)"} checked {/if} title="无" >
        </div>
    </div>
    {/if}
    <div id="n_shuxing" {if condition="empty($goods_price.id)"} style="display:none;" {/if}>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline" >
                <input type="text" name="n_goods_name" required="required" placeholder="商品名称" autocomplete="off" class="layui-input" value="{$goods.name}" data-id="" disabled="disabled">
            </div>
            <div class="layui-input-inline" >
                <input type="text" name="n_price" required="required" placeholder="商品价格" autocomplete="off" class="layui-input" value="{$goods_price.price}" data-id="">
            </div>
            <div class="layui-input-inline" >
                <input type="text" name="member_price" required="required" placeholder="会员价格" autocomplete="off" class="layui-input" value="{$goods_price.member_price}" data-id="">
            </div>
            <div class="layui-input-inline" >
                <input type="text" name="n_warn_stock" required="required" placeholder="安全库存" autocomplete="off" class="layui-input" value="{$goods_price.warn_stock}" data-id="">
            </div>
        </div>
    </div>
    <input type="hidden" name="goods_spec_id" value="{$goods_price.id}">
    </div>
    <div id="shuxing" {if condition="$goods.is_spec eq 0"} style="display:none" {/if}> 
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="spec_id[]" lay-verify="required" lay-search>
                    {volist name="spec" id="v1"}
                        <option value="{$v1.id}" >{$v1.name}</option>
                    {/volist}
                </select>
            </div>
            <div class="layui-input-inline" >
                <input type="text" name="detail[]" required="required" placeholder="请输入属性名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span>
    </div>
    <div class="layui-form-item" id="add">
        <div class="layui-inline">
            <span class="layui-btn tianjiayihan" type="btn" onclick="tianjia();">添加</span>
        </div>
        <div class="layui-inline">
            <span class="layui-btn tianjiayihan" type="btn" onclick="createspec();">生成属性</span>
        </div>
    </div>
    <div id="create">
        
    </div>
    </div>

    <div class="hr-line-dashed"></div>
    <div class="col-sm-4 col-sm-offset-2" id="baocun">
        <input type='hidden' name='goods_id' value='{$id}'/>
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit" onclick="">保存</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    /**
     * 添加属性
     * @Author   lingyun
     * @DateTime 2017-11-30T19:50:42+0800
     * @return   {[type]}                 [description]
     */
    function tianjia(){
        var ht = '<div class="layui-form-item"><div class="layui-inline"><div class="layui-input-inline"><select name="spec_id[]" lay-verify="required" lay-search>{volist name="spec" id="v1"}<option value="{$v1.id}" >{$v1.name}</option>{/volist}</select></div><div class="layui-input-inline" ><input type="text" name="detail[]" required="required" placeholder="请输入属性名称" autocomplete="off" class="layui-input"></div></div><span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span></div>';
        // var html = ht;
        // var html = '<div class="layui-form-item">'+ht+'</div>';
        // alert(html);
        $("#add").before(ht);
        window.form.render('select'); //刷新select选择框渲染
        $('#create').empty();       //清空元素内部元素
    }
    function reduce(obj){
        var val = $(obj).parent().find("input[name='detail[]']").val();
        $("input[name='title[]']").each(function(){
            if($(this).val().indexOf(val)>=0){
                $(this).parent().parent().parent().remove();
            }
        });

        $(obj).parent().remove();
    }
    /**
     * 生成属性
     * @Author   lingyun
     * @DateTime 2017-11-30T20:09:49+0800
     * @return   {[type]}                 [description]
     */
    function createspec(){
        var spec_id = new Array();      //属性id
        var spec_name = new Array();    //属性的名称
        var title = new Array();    //属性分类 1140-18 = 1122
        var goods_id = $('input[name=goods_id]').val();
        var status = 1;
        $("select option:selected").each(function(){
            if($(this).parent().parent().parent().find('input[name="detail[]"]').val() == ''){
                status = 0;     //结束标志
                layer.msg('请输入属性名称'); 
                return false;
            }
            var specid = $(this).val();
            var specname = $(this).parent().parent().parent().find('input[name="detail[]"]').val();
            var speccate = $(this).text();
            var titles = specname+'  ';     //组合属性名称

            // if(spec_id.indexOf(specid)<0){    //不存在返回-1
                spec_id.push(specid);
            // }   
            // if(specname.indexOf(spec_name)<0){
                spec_name.push(specname);
            // }
            // if(specname.indexOf(spec_name)<0){
                title.push(titles);
            // }
        });

        if(status == 0){
            return false;
        }
        $.post('{:url("Goodsspec/addspeccate")}',
        {goods_id:goods_id,spec_id:spec_id,spec_name:spec_name,title:title},
        function(data){
            $('#create').empty();       //清空元素内部元素
            $("#create").append(data.msg);
            return false;
        });
        return false;
    }
</script>
<script>
    form.on('radio(test)', function(data){
        if(data.value == 1){
            $('#shuxing').show();
            $('#baocun').show();
            $('#n_shuxing').hide();
        }else{
            $('#shuxing').hide();
            $('#baocun').show();
            $('#n_shuxing').show();
        }
    });
</script> 
</form>

{/block}